<template>
  <a-drawer
    v-model:visible="visible"
    class="custom-class"
    style="color: red"
    placement="right"
    width="600px"
    :title="false"
    :loading="isloading"
    :closable="false"
  >
    <div v-if="isloading" class="ye_loading">
      <a-spin tip="加载中..." />
    </div>

    <div class="top">
      <div class="top_left">
        <img class="top_left_img" :src="infoList.imgurl" alt="" />
      </div>
      <div class="top_right">
        <div class="one">
          <div class="one_title">
            {{ infoList.spu_name }}
          </div>
          <div class="one_icon" @click="closeFn">
            <close-outlined />
          </div>
        </div>
        <div class="two">
          {{ infoList.poi_name }}
        </div>
        <div class="three">
          <div class="three_left">￥{{ infoList.actual_price }}</div>
          <div class="three_right">
            赚￥ {{ infoList.earn_price }} 佣金率 {{ infoList.take_rate }}%
          </div>
        </div>
      </div>
    </div>

    <div class="title">
      <div class="title_top">
        推广标题
        <question-circle-filled @click="open_ai_goods" class="title_top_icon" />
      </div>

      <div class="title_content">
        <div class="left">
          <img
            class="left_img"
            src="../images/life_spu_tuan_anchor.png"
            alt=""
          />
        </div>
        <div class="right">
          <a-input
            style="
              width: 500px;
              background-color: #f0f0f2;
              border-radius: 10px;
              padding: 6px 10px;
            "
            show-count
            :maxlength="10"
            :bordered="false"
            v-model:value="tuangou_title"
            placeholder="如:   海底捞超值双人套餐"
          />
        </div>
      </div>

      <div class="title_desc">
        <div class="one">· 标题提及信息需与商品详情描述一致；</div>
        <div class="two">· 不得包含错别字，或“最”、“第一”等违规广告词；</div>
      </div>
    </div>

    <div class="bottom">
      <div class="bottom_title">
        智能推荐相关商品
        <!-- <question-circle-filled
          @click="open_two_ai_goods"
          class="title_top_icon"
        /> -->
      </div>

      <div class="bottom_invite">
        <div class="left">
          邀请你体验测试功能，视频交易约能提示<span class="left_red">15%</span>
        </div>
        <div class="right">
          <a-switch v-model:checked="spu_intranetpage" />
        </div>
      </div>

      <div class="bottom_radio">
        <a-radio-group v-model:value="botton_value">
          <a-radio :value="1" style="display: flex; align-items: center">
            <div class="bottom_h1">仅推荐同品牌商品</div>
            <div class="bottom_desc">提升交易额，兼顾商家品牌推广</div>
          </a-radio>
          <a-radio
            :value="2"
            style="margin-top: 20px; display: flex; align-items: center"
          >
            <div class="bottom_h1">可推荐其他品牌的商品</div>
            <div class="bottom_desc">激进提示交易额</div>
          </a-radio>
        </a-radio-group>
      </div>
    </div>

    <template #footer>
      <div class="btn">
        <a-button :disabled="isloading" type="primary" @click="SaveFn"> 添加 </a-button>
      </div>
    </template>

    <a-modal
      v-model:visible="open_ai_visible"
      :title="null"
      :footer="null"
      @ok="open_ai_handleOk"
    >
      <img style="width: 490px" src="../images/groupbuy.png" alt="" />

      <div class="open_ai_bottom">
        <div class="one">推广标题将在视频播放页展示</div>
        <div class="two">以锚点文字形式表达</div>
        <div class="three">
          <a-button class="three_btn" @click="open_ai_handleOk"
            >我知道了</a-button
          >
        </div>
      </div>
    </a-modal>

    <a-modal
      v-model:visible="open_two_ai_visible"
      :title="null"
      :footer="null"
      @ok="open_two_ai_handleOk"
    >
      <div class="two_open_ai_bottom">
        <div class="text">
          <div class="one">智能推荐相关商品 效果预览</div>
          <div class="two">视频交易额约能提升 <span class="red">15%</span></div>
        </div>

        <img
          class="two_img"
          style="width: 490px"
          src="../images/placeholder.png"
          alt=""
        />

        <div class="two_bottom">
          <a-radio-group v-model:value="botton_value" button-style="solid">
            <a-radio-button value="1">仅推荐同品牌商品</a-radio-button>
            <a-radio-button value="2">可推荐其他品牌的商品</a-radio-button>
          </a-radio-group>
        </div>
      </div>
    </a-modal>
  </a-drawer>
</template>

<script>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  watch,
  createVNode,
  onMounted,
} from "vue";
import request from "../../../../common/utils/request";
import {
  PlusOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
  EllipsisOutlined,
  CloseOutlined,
  QuestionCircleOutlined,
  QuestionCircleFilled,
} from "@ant-design/icons-vue";
import { message, Modal, Transfer } from "ant-design-vue";
import "ant-design-vue/lib/transfer/style/css"; // 引入样式
import store from "../../../../store";
export default defineComponent({
  props: {
    now_douyin_tuanID: {
      type: String,
      default: "",
    },
    edit_page_poi_id: {
      type: String,
      default: "",
    },
    spu_id: {
      type: String,
      default: "",
    },
  },
  components: {
    PlusOutlined,
    DeleteOutlined,
    ExclamationCircleOutlined,
    EllipsisOutlined,
    ATransfer: Transfer,
    CloseOutlined,
    QuestionCircleOutlined,
    QuestionCircleFilled,
  },
  setup(props, context) {
    const state = reactive({
      isloading: false,
      visible: false,
      tuangou_title: "",
      spu_intranetpage: true,
      botton_value: 2,
      open_ai_visible: false,
      open_two_ai_visible: false,
      two_value: 1,
      infoList: {
        imgurl: "",
        spu_name: "",
        poi_name: "",
        actual_price: "",
        earn_price: "",
        take_rate: "",
      },
    });

    // 打开弹窗
    const showDrawer = () => {
      state.visible = true;
      state.isloading = true;
    };

    const getUserInfo = () => {
      try {
        request
          .get("/work_ai", "/platform/account/spu/list", {
            id: props.now_douyin_tuanID,
            edit_page_poi_id: props.edit_page_poi_id,
            keyword: props.spu_id,
            cursor: "",
            count: "",
            edit_page: "",
          })
          .then((res) => {
            state.isloading = false;
            state.infoList.imgurl =
              res.result.cps_spu_list[0].image_url.url_list[0];
            state.infoList.spu_name = res.result.cps_spu_list[0].spu_name;
            state.infoList.poi_name = res.result.cps_spu_list[0].poi.poi_name;
            state.infoList.actual_price =
              res.result.cps_spu_list[0].actual_price / 100;
            state.infoList.earn_price =
              res.result.cps_spu_list[0].display_cps.earn_price / 100;
            state.infoList.take_rate =
              res.result.cps_spu_list[0].display_cps.take_rate / 100;
          });
      } catch (error) {
        state.isloading = false;
      }
    };

    const SaveFn = () => {
      if (state.tuangou_title == "") {
        return message.warning("请添加推广标题");
      }

      context.emit("SaveFn", {
        tuangou_title: state.tuangou_title,
        brand_switch: state.botton_value,
        spu_id: props.spu_id,
        spu_intranetpage: state.spu_intranetpage
      });

      state.visible = false;
      state.tuangou_title = ""
      state.botton_value = 2


    };

    const open_ai_goods = () => {
      state.open_ai_visible = true;
    };

    const open_ai_handleOk = () => {
      state.open_ai_visible = false;
    };

    const open_two_ai_goods = () => {
      state.open_two_ai_visible = true;
    };

    const open_two_ai_handleOk = () => {
      state.open_two_ai_visible = false;
    };

    const closeFn = () => {
      state.tuangou_title = ""
      state.visible = false;
      state.botton_value = 2
      context.emit("closeFnitem");
    };

    watch(
      () => props.edit_page_poi_id,
      (val) => {
        if (val) {
          getUserInfo();
        }
      },
      {
        immediate: true,
      }
    );

    // 添加标题
    return {
      ...toRefs(state),
      showDrawer,
      SaveFn,
      open_ai_goods,
      open_ai_handleOk,
      open_two_ai_handleOk,
      open_two_ai_goods,
      closeFn,
    };
  },
});
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  display: flex;
  padding-right: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f2f2f4;

  .top_left {
    margin-right: 10px;
    .top_left_img {
      width: 80px;
      height: 80px;
      border-radius: 4px;
    }
  }

  .top_right {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .one {
      width: 100%;
      margin-right: -15px;
      display: flex;
      justify-content: space-between;
      color: #000;
      font-weight: 700;
      font-size: 16px;
      .one_title {
        width: 90%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .one_icon {
        color: #7a7a80;
      }
    }
    .two {
      width: 100%;
      color: #939393;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .three {
      color: #fb1d4c;
      display: flex;
      align-items: center;

      .three_right {
        padding: 2px 4px;
        margin-left: 10px;
        background-color: #fdeaeb;
      }
    }
  }
}

.title {
  padding: 20px 0;
  border-bottom: 1px solid #f2f2f4;

  .title_top {
    color: #1c1f23;
    font-size: 16px;
    font-weight: 500;
    .title_top_icon {
      margin-left: 6px;
      color: #afb0b1;
      font-size: 16px;
      cursor: pointer;
    }
  }

  .title_content {
    margin-top: 20px;
    display: flex;
    .left {
      margin-right: 10px;
      .left_img {
        width: 30px;
      }
    }
  }

  .title_desc {
    margin-top: 20px;
    font-size: 12px;
    color: rgba(37, 38, 50, 0.349);
  }
}

.bottom {
  padding: 20px 0;

  .bottom_title {
    color: #1c1f23;
    font-size: 16px;
    font-weight: 500;
    .title_top_icon {
      margin-left: 6px;
      color: #afb0b1;
      font-size: 16px;
    }
  }
  .bottom_invite {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .left {
      font-size: 12px;
      color: rgba(37, 38, 50, 0.349);
      .left_red {
        color: #fb1d4c;
      }
    }
  }

  .bottom_radio {
    margin-top: 20px;

    .bottom_h1 {
      color: #1c1f23;
      font-size: 14px;
      font-weight: 600;
    }
    .bottom_desc {
      font-size: 12px;
      color: rgba(37, 38, 50, 0.349);
    }
  }
}

.btn {
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}

.open_ai_bottom {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  .one {
    font-weight: 700;
    font-size: 16px;
  }

  .two {
    margin: 20px 0;
    color: rgba(37, 38, 50, 0.349);
  }

  .three {
    .three_btn {
      border-radius: 10px;
      border: none;
      background-color: #f3f3f4;
      width: 220px;
      height: 44px;
      font-weight: 700;
    }
  }
}

.two_open_ai_bottom {
  position: relative;
  .text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .one {
    font-weight: 700;
    text-align: center;
    font-size: 16px;
    margin: 10px 0;
  }
  .two {
    text-align: center;
    font-size: 14px;
    color: #595a61;
    // color: rgba(37, 38, 50, 0.349);
    .red {
      color: #fb1d4c;
    }
  }

  .two_img {
    margin-top: 40px;
  }

  .two_bottom {
    margin-top: 32px;
    display: flex;
    justify-content: center;
  }
}

.ye_loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
